Next.js Middleware'i erijuhud: päringute muutmise mustrite valdamine

Next.js middleware pakub võimsat mehhanismi päringute pealtkuulamiseks ja muutmiseks enne, kui need jõuavad teie rakenduse marsruutideni. See võimekus avab laia valiku võimalusi, alates lihtsatest autentimiskontrollidest kuni keerukate A/B testimise stsenaariumite ja rahvusvahelistumise strateegiateni. Kuid middleware'i tõhusaks kasutamiseks on vaja sügavat arusaamist selle erijuhtudest ja potentsiaalsetest lõksudest. See põhjalik juhend uurib täiustatud päringute muutmise mustreid, pakkudes praktilisi näiteid ja teostatavaid teadmisi, mis aitavad teil ehitada robustseid ja jõudsaid Next.js rakendusi.

Next.js Middleware'i põhitõdede mõistmine

Enne täiustatud mustritesse sukeldumist kordame üle Next.js middleware'i põhitõed. Middleware'i funktsioonid käivitatakse enne päringu lõpuleviimist, võimaldades teil:

• URL-ide ümberkirjutamine: Kasutajate suunamine erinevatele lehtedele kindlate kriteeriumide alusel.
• Kasutajate ümbersuunamine: Kasutajate saatmine täiesti erinevatele URL-idele, sageli autentimise või autoriseerimise eesmärgil.
• Päiste muutmine: HTTP-päiste lisamine, eemaldamine või värskendamine.
• Otse vastamine: Vastuse tagastamine otse middleware'ist, möödudes Next.js marsruutidest.

Middleware'i funktsioonid asuvad failis middleware.js või middleware.ts teie /pages või /app kataloogis (sõltuvalt teie Next.js versioonist ja seadistusest). Nad saavad sissetulevat päringut esindava NextRequest objekti ja võivad tagastada NextResponse objekti, et kontrollida järgnevat käitumist.

Näide: Põhiline autentimise middleware

See näide demonstreerib lihtsat autentimiskontrolli. Kui kasutaja pole autenditud (nt küpsises pole kehtivat tokenit), suunatakse ta sisselogimislehele.

            
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const authToken = request.cookies.get('authToken')

  if (!authToken) {
    return NextResponse.redirect(new URL('/login', request.url))
  }

  return NextResponse.next()
}

export const config = {
  matcher: ['/protected/:path*'],
}

            

              
                Copy
              
            
          

See middleware käivitub ainult marsruutidel, mis vastavad mustrile /protected/:path*. See kontrollib authToken küpsise olemasolu. Kui küpsis puudub, suunatakse kasutaja /login lehele. Vastasel juhul lubatakse päringul normaalselt jätkuda, kasutades NextResponse.next().

Täiustatud päringute muutmise mustrid

Nüüd uurime mõningaid täiustatud päringute muutmise mustreid, mis näitavad Next.js middleware'i tõelist jõudu.

1. A/B testimine küpsistega

A/B testimine on oluline tehnika kasutajakogemuse optimeerimiseks. Middleware'i saab kasutada kasutajate juhuslikuks määramiseks teie rakenduse erinevatele variantidele ja nende käitumise jälgimiseks. See muster tugineb küpsistele, et säilitada kasutajale määratud variant.

Näide: Avalehe A/B testimine

            
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

const VARIANT_A = 'variantA'
const VARIANT_B = 'variantB'

export function middleware(request: NextRequest) {
  let variant = request.cookies.get('variant')?.value

  if (!variant) {
    // Määra variant juhuslikult
    variant = Math.random() < 0.5 ? VARIANT_A : VARIANT_B
    const response = NextResponse.next()
    response.cookies.set('variant', variant)
    return response
  }

  if (variant === VARIANT_A) {
    return NextResponse.rewrite(new URL('/variant-a', request.url))
  } else if (variant === VARIANT_B) {
    return NextResponse.rewrite(new URL('/variant-b', request.url))
  }

  return NextResponse.next()
}

export const config = {
  matcher: ['/'],
}

            

              
                Copy
              
            
          

Selles näites, kui kasutaja külastab juur-URL-i (/) esimest korda, määrab middleware talle juhuslikult kas variantA või variantB. See variant salvestatakse küpsisesse. Sama kasutaja järgnevad päringud kirjutatakse ümber kas aadressile /variant-a või /variant-b, sõltuvalt talle määratud variandist. See võimaldab teil serveerida erinevaid avalehti ja jälgida, kumb neist paremini toimib. Veenduge, et teie Next.js rakenduses on määratletud marsruudid /variant-a ja /variant-b jaoks.

Globaalsed kaalutlused: A/B testimise läbiviimisel arvestage piirkondlike erinevustega. Disain, mis kõnetab Põhja-Ameerikas, ei pruugi Aasias olla sama tõhus. Võiksite kasutada geograafilist asukohaandmeid (saadud IP-aadressi otsingu või kasutajaeelistuste kaudu), et kohandada A/B testi konkreetsetele piirkondadele.

2. Lokaliseerimine (i18n) URL-ide ümberkirjutamisega

Rahvusvahelistumine (i18n) on globaalse publikuni jõudmiseks hädavajalik. Middleware'i saab kasutada kasutaja eelistatud keele automaatseks tuvastamiseks ja tema suunamiseks teie saidi vastavasse lokaliseeritud versiooni.

Näide: Ümbersuunamine Accept-Language päise põhjal

            
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

const SUPPORTED_LANGUAGES = ['en', 'fr', 'es', 'de']
const DEFAULT_LANGUAGE = 'en'

function getPreferredLanguage(request: NextRequest): string {
  const acceptLanguage = request.headers.get('accept-language')
  if (!acceptLanguage) {
    return DEFAULT_LANGUAGE
  }

  const languages = acceptLanguage.split(',').map((lang) => lang.split(';')[0].trim())

  for (const lang of languages) {
    if (SUPPORTED_LANGUAGES.includes(lang)) {
      return lang
    }
  }

  return DEFAULT_LANGUAGE
}

export function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname

  // Kontrolli, kas URL-is on juba lokaat olemas
  if (
    SUPPORTED_LANGUAGES.some(
      (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
    )
  ) {
    return NextResponse.next()
  }

  const preferredLanguage = getPreferredLanguage(request)

  return NextResponse.redirect(
    new URL(`/${preferredLanguage}${pathname}`, request.url)
  )
}

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico).*)'
  ],
}

            

              
                Copy
              
            
          

See middleware eraldab päringust Accept-Language päise ja määrab kindlaks kasutaja eelistatud keele. Kui URL ei sisalda juba keeleprefiksit (nt /en/about), suunab middleware kasutaja vastavale lokaliseeritud URL-ile (nt /fr/about prantsuse keele puhul). Veenduge, et teil on oma /pages või /app kataloogis sobiv kaustastruktuur erinevate lokaatide jaoks. Näiteks vajate faile /pages/en/about.js ja /pages/fr/about.js.

Globaalsed kaalutlused: Veenduge, et teie i18n-rakendus käsitleks paremalt vasakule kirjutatavaid keeli (nt araabia, heebrea) korrektselt. Samuti kaaluge sisuedastusvõrgu (CDN) kasutamist, et serveerida lokaliseeritud varasid kasutajatele lähematest serveritest, parandades seeläbi jõudlust.

3. Funktsioonilipud (Feature Flags)

Funktsioonilipud võimaldavad teil oma rakenduses funktsioone sisse või välja lülitada ilma uut koodi juurutamata. See on eriti kasulik uute funktsioonide järkjärguliseks kasutuselevõtuks või funktsioonide testimiseks tootmiskeskkonnas. Middleware'i saab kasutada funktsioonilipu staatuse kontrollimiseks ja päringu vastavaks muutmiseks.

Näide: Beetafunktsiooni lubamine

            
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

const BETA_FEATURE_ENABLED = process.env.BETA_FEATURE_ENABLED === 'true'

export function middleware(request: NextRequest) {
  if (BETA_FEATURE_ENABLED && request.nextUrl.pathname.startsWith('/new-feature')) {
    return NextResponse.next()
  }

  // Valikuliselt suuna "funktsioon pole saadaval" lehele
  return NextResponse.rewrite(new URL('/feature-unavailable', request.url))
}

export const config = {
  matcher: ['/new-feature/:path*'],
}

            

              
                Copy
              
            
          

See middleware kontrollib keskkonnamuutuja BETA_FEATURE_ENABLED väärtust. Kui see on seatud väärtusele true ja kasutaja proovib pääseda marsruudile /new-feature all, lubatakse päringul jätkuda. Vastasel juhul suunatakse kasutaja lehele /feature-unavailable. Ärge unustage konfigureerida keskkonnamuutujaid sobivalt erinevate keskkondade (arendus, testimine, tootmine) jaoks.

Globaalsed kaalutlused: Funktsioonilippude kasutamisel arvestage juriidiliste tagajärgedega, mis kaasnevad funktsioonide lubamisega, mis ei pruugi olla kõigis piirkondades eeskirjadega kooskõlas. Näiteks andmekaitsega seotud funktsioonid võivad teatud riikides vajada keelamist.

4. Seadmetuvastus ja adaptiivne marsruutimine

Kaasaegsed veebirakendused peavad olema responsiivsed ja kohanema erinevate ekraanisuuruste ja seadmete võimalustega. Middleware'i saab kasutada kasutaja seadmetüübi tuvastamiseks ja nende suunamiseks teie saidi optimeeritud versioonidele.

Näide: Mobiilikasutajate suunamine mobiilile optimeeritud alamdomeenile

            
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { device } from 'detection'

export function middleware(request: NextRequest) {
  const userAgent = request.headers.get('user-agent')

  if (userAgent) {
    const deviceType = device(userAgent)

    if (deviceType.type === 'phone') {
      const mobileUrl = new URL(request.url)
      mobileUrl.hostname = 'm.example.com'
      return NextResponse.redirect(mobileUrl)
    }
  }

  return NextResponse.next()
}

export const config = {
  matcher: ['/'],
}

            

              
                Copy
              
            
          

See näide kasutab teeki `detection`, et määrata kasutaja seadme tüüp User-Agent päise põhjal. Kui kasutaja on mobiiltelefonis, suunatakse ta alamdomeenile m.example.com (eeldusel, et teil on seal hostitud saidi mobiilile optimeeritud versioon). Ärge unustage paigaldada `detection` paketti: `npm install detection`.

Globaalsed kaalutlused: Veenduge, et teie seadmetuvastuse loogika arvestaks piirkondlike erinevustega seadmete kasutamisel. Näiteks on nuputelefonid mõnes arengumaas endiselt levinud. Kaaluge User-Agent'i tuvastamise ja responsiivse disaini tehnikate kombinatsiooni kasutamist robustsema lahenduse saamiseks.

5. Päringupäiste rikastamine

Middleware saab lisada teavet päringu päistesse enne, kui teie rakenduse marsruudid seda töötlevad. See on kasulik kohandatud metaandmete, näiteks kasutajarollide, autentimisstaatuse või päringu ID-de lisamiseks, mida teie rakenduse loogika saab kasutada.

Näide: Päringu ID lisamine

            
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { v4 as uuidv4 } from 'uuid'

export function middleware(request: NextRequest) {
  const requestId = uuidv4()
  const response = NextResponse.next()
  response.headers.set('x-request-id', requestId)
  return response
}

export const config = {
  matcher: ['/api/:path*'], // Rakenda ainult API marsruutidele
}

            

              
                Copy
              
            
          

See middleware genereerib unikaalse päringu ID, kasutades teeki uuid, ja lisab selle x-request-id päisesse. Seda ID-d saab seejärel kasutada logimiseks, jälgimiseks ja silumiseks. Ärge unustage paigaldada uuid paketti: `npm install uuid`.

Globaalsed kaalutlused: Kohandatud päiste lisamisel pidage silmas päiste suuruse piiranguid. Nende piirangute ületamine võib põhjustada ootamatuid vigu. Samuti veenduge, et päistesse lisatud tundlik teave on korralikult kaitstud, eriti kui teie rakendus on pöördproksi või CDN-i taga.

6. Turvalisuse täiustused: Päringute piiramine (Rate Limiting)

Middleware võib toimida esimese kaitseliinina pahatahtlike rünnakute vastu, rakendades päringute piiramist. See hoiab ära kuritarvitamise, piirates päringute arvu, mida klient saab kindla ajavahemiku jooksul teha.

Näide: Põhiline päringute piiramine lihtsa salvestusruumiga

            
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

const requestCounts: { [ip: string]: number } = {}
const WINDOW_SIZE_MS = 60000; // 1 minut
const MAX_REQUESTS_PER_WINDOW = 100;

export function middleware(request: NextRequest) {
  const clientIP = request.ip || '127.0.0.1' // Hangi kliendi IP, vaikimisi localhost kohalikuks testimiseks

  if (!requestCounts[clientIP]) {
    requestCounts[clientIP] = 0;
  }

  requestCounts[clientIP]++;

  if (requestCounts[clientIP] > MAX_REQUESTS_PER_WINDOW) {
    return new NextResponse(
      JSON.stringify({ message: 'Too many requests' }),
      { status: 429, headers: { 'Content-Type': 'application/json' } }
    );
  }

  // Lähtesta loendur pärast akna möödumist
  setTimeout(() => {
    requestCounts[clientIP]--;
    if (requestCounts[clientIP] <= 0) {
        delete requestCounts[clientIP];
    }
  }, WINDOW_SIZE_MS);

  return NextResponse.next();
}

export const config = {
  matcher: ['/api/:path*'], // Rakenda kõigile API marsruutidele
}

            

              
                Copy
              
            
          

See näide haldab lihtsat mälusisest salvestusruumi (requestCounts), et jälgida iga IP-aadressi päringute arvu. Kui klient ületab MAX_REQUESTS_PER_WINDOW piiri WINDOW_SIZE_MS jooksul, tagastab middleware vea 429 Too Many Requests. Tähtis: See on lihtsustatud näide ja ei sobi tootmiskeskkondadesse, kuna see ei skaleeru ja on haavatav teenusetõkestamise rünnakutele. Tootmiskasutuseks kaaluge robustsema päringute piiramise lahenduse, näiteks Redis või spetsiaalse päringute piiramise teenuse kasutamist.

Globaalsed kaalutlused: Päringute piiramise strateegiad tuleks kohandada vastavalt teie rakenduse eripäradele ja kasutajate geograafilisele jaotusele. Kaaluge erinevate piirangute kasutamist erinevate piirkondade või kasutajasegmentide jaoks.

Erijuhud ja potentsiaalsed lõksud

Kuigi middleware on võimas tööriist, on oluline olla teadlik selle piirangutest ja potentsiaalsetest lõksudest:

• Mõju jõudlusele: Middleware lisab igale päringule lisakoormust. Vältige arvutusmahukate operatsioonide tegemist middleware'is, kuna see võib jõudlust märkimisväärselt mõjutada. Profiilige oma middleware'i, et tuvastada ja optimeerida jõudluse kitsaskohti.
• Keerukus: Middleware'i liigne kasutamine võib muuta teie rakenduse raskemini mõistetavaks ja hooldatavaks. Kasutage middleware'i kaalutletult ja veenduge, et igal middleware'i funktsioonil on selge ja hästi määratletud eesmärk.
• Testimine: Middleware'i testimine võib olla keeruline, kuna see nõuab HTTP-päringute simuleerimist ja tulemuseks olevate vastuste kontrollimist. Kasutage tööriistu nagu Jest ja Supertest, et kirjutada oma middleware'i funktsioonidele põhjalikke ühiku- ja integratsiooniteste.
• Küpsiste haldamine: Olge küpsiste seadmisel middleware'is ettevaatlik, kuna see võib mõjutada vahemälu käitumist. Veenduge, et mõistate küpsistel põhineva vahemälu tagajärgi ja konfigureerige oma vahemälu päised vastavalt.
• Keskkonnamuutujad: Veenduge, et kõik teie middleware'is kasutatavad keskkonnamuutujad on erinevate keskkondade (arendus, testimine, tootmine) jaoks õigesti konfigureeritud. Kasutage oma keskkonnamuutujate haldamiseks tööriista nagu Dotenv.
• Servafunktsioonide piirangud: Pidage meeles, et middleware töötab servafunktsioonidena (Edge Functions), millel on piirangud täitmisajale, mälukasutusele ja pakitud koodi suurusele. Hoidke oma middleware'i funktsioonid kerged ja tõhusad.

Next.js Middleware'i kasutamise parimad praktikad

Next.js middleware'i eeliste maksimeerimiseks ja võimalike probleemide vältimiseks järgige neid parimaid praktikaid:

• Hoidke see lihtsana: Igal middleware'i funktsioonil peaks olema üks, selgelt määratletud ülesanne. Vältige liiga keerukate middleware'i funktsioonide loomist, mis täidavad mitut ülesannet.
• Optimeerige jõudluse jaoks: Minimeerige middleware'is tehtava töötluse hulka, et vältida jõudluse kitsaskohti. Kasutage vahemälustrateegiaid korduvate arvutuste vajaduse vähendamiseks.
• Testige põhjalikult: Kirjutage oma middleware'i funktsioonidele põhjalikke ühiku- ja integratsiooniteste, et tagada nende ootuspärane käitumine.
• Dokumenteerige oma kood: Dokumenteerige selgelt iga middleware'i funktsiooni eesmärk ja funktsionaalsus, et parandada hooldatavust.
• Jälgige oma rakendust: Kasutage jälgimisvahendeid, et jälgida oma middleware'i funktsioonide jõudlust ja veamäärasid.
• Mõistke täitmisjärjekorda: Olge teadlik järjekorrast, milles middleware'i funktsioonid käivitatakse, kuna see võib mõjutada nende käitumist.
• Kasutage keskkonnamuutujaid targalt: Kasutage keskkonnamuutujaid oma middleware'i funktsioonide konfigureerimiseks erinevate keskkondade jaoks.

Kokkuvõte

Next.js middleware pakub võimsat viisi päringute muutmiseks ja teie rakenduse käitumise kohandamiseks servas. Mõistes selles juhendis käsitletud täiustatud päringute muutmise mustreid, saate ehitada robustseid, jõudsaid ja globaalselt teadlikke Next.js rakendusi. Pidage meeles hoolikalt kaaluda erijuhte ja potentsiaalseid lõkse ning järgige ülaltoodud parimaid praktikaid, et tagada teie middleware'i funktsioonide usaldusväärsus ja hooldatavus. Võtke omaks middleware'i jõud, et luua erakordseid kasutajakogemusi ja avada uusi võimalusi oma veebirakendustele.